<template>
    <drawer ref="drawer" :show="show" @cancel="cancel" @close="show = false" @confirm="confirm" :showCancle="false" :title="title" :showBtns="false"
        confirmText="我知道了">
        <view class="user-list">
            <view class="user-item" v-for="user in options" :key="user.name">
                <view class="user-item-header">
                    <text>{{ (user.name || '').slice(-2) }}</text>
                </view>
                <view class="user-item-name">{{ user.name }}</view>

                <image class="user-item-phone" @click.stop="callPhoneNumber(user.name,user.phone)" src="@/static/images/phone2.png">

                </image>
            </view>

        </view>
    </drawer>
</template>
<script>
import drawer from '@/components/filter-drawer/drawer.vue';
export default {
	components: { drawer },
	props: {
		title: {
			type: String,
			default: '救援人'
		},

	},
	data() {
		return {
			options: [

			],
		};
	},
	methods: {

		open(options) {
			this.options = options;
			this.show = true;
		},

		confirm() {
			this.show = false;
		},

		cancel() {
			this.show = false;
		},
		callPhoneNumber(name, phone) {
			if (phone) {
				uni.showModal({
					title: '呼叫' + name,
					content: phone,
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone
							});
						}
					},
				});
			} else {
				uni.showToast({
					title: '无效的电话号码',
					icon: 'none'
				});
			}
		},
	}
};

</script>
<style lang="scss" scoped>
.user-list {

    padding: 0 20rpx;
    padding-bottom: 60rpx;

    .user-item {
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1px solid #eee;
        align-items: center;
        font-size: 26rpx;
        color: #333;

        &-header {
            color: #fff;
            width: 54rpx;
            height: 54rpx;
            border-radius: 50%;
            text-align: center;
            font-size: 22rpx;
            line-height: 52rpx;
            margin-left: 12rpx;
            overflow: hidden;
            background-color: #0091FF;
            margin-right: 16rpx;

            text {
                width: 78rpx;
                display: block;
                margin-left: -12rpx;
                overflow: hidden;
            }
        }

        &-phone{
            margin-left: auto;
            width:44rpx;
            height: 44rpx;
        }
    }
    .user-item:last-child{
        border: none;
    }
}
</style>